<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="closed_details_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">{{text}}产品<i class="el-icon-close"></i></div>
    </div>
    <div class="closed_details_title">
      <div class="closed_details_title_left">产品包列表/<i>{{text}}产品包</i></div>
      <div class="closed_details_title_right">
        <button class="closed_details_title_right_btn"
                @click="handerBase">
          返回
        </button>
      </div>
    </div>
    <div class="container-box">
      <!-- <div>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1">产品包信息</el-menu-item>
          <el-menu-item index="2">应用场景详情</el-menu-item>
          <el-menu-item index="3">产品包商品</el-menu-item>
        </el-menu>
      </div> -->
      <!-- 头部导航 -->
        <div class="navTab">
            <div class="navTabList">
                <div class="navTabItem" :class="{'navTabItem_active':current==index}" v-for="(item,index) in navTab" :key="index" @click="navFn($event)" :data-index='index'>{{item}}<div class="navBorder" v-if="current==index"></div></div>
            </div>
        </div>
      <div class="product-detail"
           v-show="current == 0">
        <el-form ref="form"
                 :model="form"
                 label-position="left">
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="名称"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.name"></el-input>
              </el-form-item>
            </div>
            <!-- <div class="service">
              <el-form-item label="价格"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.area_price"></el-input>
                <span class="money">元/m²</span>
              </el-form-item>
            </div> -->
          </div>

          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="标签"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.title"
                          class="tag"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="面积"
                            label-width="50px">
                <el-input type="text"
                          v-model="form.area_scope"
                          placeholder="请输入面积范围，例如：100-120"></el-input><span class="money">m²</span>
                <el-input type="text"
                          v-model="form.price"
                          placeholder="请输入价格"
                          class="price"></el-input>
                <span class="money">元</span>
              </el-form-item>
            </div>
            <el-button type="primary"
                       class="add-btn"
                       @click="addData">添加</el-button>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label=""
                            label-width="50px">
                <div class="add-items">
                  <div v-for="(item, index) in list"
                       :key="index"
                       class="add-item">
                    <div>
                      {{ item.area_scope + "m²"}} ;
                      {{ item.price }}元
                    </div>
                    <i class="el-icon-error"
                       @click="handleDel(index)"></i>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="封面图片"
                            label-width="80px">
                <el-upload class="avatar-uploader"
                          style="border: 1px dashed #d9d9d9;"
                           action="/api/admin/base/uploadfile"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl"
                       :src="imageUrl"
                       class="avatar">
                  <i v-else
                     class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
          </div>     
          
            
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="是否推荐"
                            label-width="80px">
                <el-radio-group v-model="recommend"
                                @change="handleRecommend">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="定金付款" label-width="80px">
                    <el-radio v-model="set_deposit_status" label="0">否</el-radio>
                    <el-radio v-model="set_deposit_status" label="1">是</el-radio>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="定金比率" label-width="80px" v-if="set_deposit_status == '1'">
                  <div class="shelves" >
                    <div class="right" style="display: flex;">
                      <el-input type="number" v-model="deposit_rate" @blur="setDeposit"></el-input>
                    </div>
                    <div>% <span style="color:#bbb;">（1-100之间）</span></div>
                  </div> 
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="application-scenarios"
           v-show="current == 1">
        <el-form ref="form"
                 :model="form"
                 label-position="left">
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="标题"
                            label-width="50px">
                <el-input type="text"
                          v-model="sceneList.title"></el-input>
              </el-form-item>
            </div>
            <!-- <div class="service">
              <el-form-item label="报价"
                            label-width="50px">
                <el-input type="text"
                          v-model="sceneList.offer"></el-input>
                <span class="money">万元</span>
              </el-form-item>
            </div> -->
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="面积"
                            label-width="50px">
                <el-input type="text"
                          v-model="sceneList.area"></el-input>
                <span class="money">m²</span>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="风格"
                            label-width="50px">
                <el-select v-model="houseTypeList"
                           @change="handlehouseType"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in houseTypeTagList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="tel-input">
            <el-form-item label="户型"
                          label-width="50px">
              <!-- <el-input type="text"
                        v-model="sceneList.house_name"></el-input> -->
                <el-select v-model="house_room"
                  popper-class="el-select"
                  style="width:150px;margin-right:10px;"
                  placeholder="请选择室数">
                  <el-option v-for="item in house_room_list"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="house_office"
                  popper-class="el-select"
                  style="width:150px"
                  placeholder="请选择厅数">
                  <el-option v-for="item in house_office_list"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                  </el-option>
                </el-select>

            </el-form-item>
          </div>
          <div class="tel-input">
            <el-form-item label="轮播图"
                          label-width="60px">
              <div class="picture-card">
                <!-- <div v-if="sceneList.thumb_url">
                  <img v-for="(item, index) in sceneList.thumb_url"
                       :key="index"
                       :src="item.image_path"
                       class="avatar"
                       @click="handleDraw" />
                </div> -->

                <el-upload class="avatar-uploader"
                           action="/api/admin/base/uploadfile"
                           list-type="picture-card"
                           :on-preview="handlePictureCardPreview"
                           :on-success="handleImageSuccess"
                           :file-list="fileList"
                           :before-upload="beforeImageUpload"
                           :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%"
                     :src="dialogImageUrl"
                     alt="" />
              </el-dialog>
            </el-form-item>
          </div>
          <div style="width: 900px; height: 300px;padding-bottom: 50px">
            <el-form-item label="详情"
                          label-width="50px">
              <!--上传图片时得加载画面-->
                <VueEditor style="width: 100%"
                         v-loading="editorLoading"
                         element-loading-text="图片上传中"
                         element-loading-background="rgba(0, 0, 0, 0.5)"
                         useCustomImageHandler
                         @image-added="handleImageAdded"
                         :editorToolbar="customToolbar"
                         v-model="sceneList.content"/>
             
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="product-goods"
           v-show="current == 2">
        <el-button type="primary"
                   @click="handleAddProduct">添加商品</el-button>
       
        <div class="down-menu"
             v-if="shopList.length">
          <div v-for="(itemX, indexX) in shopList"
               :key="indexX">
            <h6 @click="handleContentShow(indexX)">
              <i class="el-icon-arrow-down"></i>{{ itemX.cate_name }}
            </h6>
            <div v-for="(item,index) in itemX.list" :key="index">
              <div v-if="itemX.isShow">
              <div class="menu-bg">
                <div class="menu-line">
                  <div class="menu-content">
                    <div><span>{{index+1}}、</span>{{ item.product_title }}</div>
                    <div>
                      <el-button @click="handleProductAdd(index,indexX,item)">添加替换商品</el-button>
                      <i @click="handleProductDel(index,indexX)"
                         class="el-icon-delete-solid"></i>
                    </div>
                  </div>
                  <p>品牌：{{ item.store_name }}</p>
                  <div class="menu-type">
                    <span>可选规格
                      <i @click="handleSelectable(item, index,indexX,1)"
                         class="el-icon-circle-plus-outline"></i></span>
                    <div v-if="item.selectData.length"
                         style="display:flex;">
                      <span class="specification"
                            v-for="(data, keys) in item.selectData"
                            :key="keys">
                        <span v-for="(child, ind) in data.arr"
                              :key="ind">
                              {{child.specif}}
                        </span> 
                        {{ data.num }}件
                        <i class="el-icon-error"
                           @click="deleteGuige1(indexX,index,keys,1)"></i>
                      </span>
                    </div>
                  </div>
                  <div class="menu-type default">
                    <span>默认规格
                      <i @click="handleDefault(item,index,indexX,1)"
                         class="el-icon-edit"></i>
                    </span>
                    <div v-if="item.selectData.length"
                         class="df-specification">
                      <div v-for="(imt, iet) in item.selectData" :key="iet" v-if="imt.checked==1">
                          <span class="specification">
                            <span v-for="(v,i) in imt.arr" :key="i">{{v.specif}}</span>
                            {{imt.num}}件
                          </span>
                      </div>
                    </div>
                    <div v-if="item.selectData.length==0"
                         class="df-specification">
                      请添加规格
                    </div>
                  </div>
                </div>
              </div>
              <div class="menu-bg">
                <div class="menu-line"
                     v-for="(data, keys) in item.productSecondList"
                     :key="keys">
                  <div class="menu-content">
                    <div>({{ keys + 1 }}){{ data.product_title }}</div>
                    <div @click="handleDelItem(indexX,index, keys)">
                      <i class="el-icon-delete-solid"></i>
                    </div>
                  </div>
                  <p>品牌：{{ data.store_name }}</p>
                  <div class="menu-type">
                    <span>可选规格
                      <i @click="handleSelectable(data, index,indexX,2, keys)"
                         class="el-icon-circle-plus-outline"></i></span>
                    <div v-if="data.selectData.length"
                         style="display:flex;">
                      <span class="specification"
                            v-for="(data, keys1) in data.selectData"
                            :key="keys1">
                        <span v-for="(child, ind) in data.arr"
                              :key="ind">
                              {{child.specif}}
                        </span> 
                        {{ data.num }}件
                        <i class="el-icon-error"
                           @click="deleteGuige1(indexX,index,keys,2,keys1)"></i>
                      </span>
                    </div>

                  </div>
                  <div class="menu-type default">
                    <span>默认规格：
                      <i @click="handleDefault(data,index,indexX,2,keys)"
                         class="el-icon-edit"></i>
                    </span>
                    <div v-if="data.selectData.length"
                         class="df-specification">
                         <div v-for="(imt, iet) in data.selectData" :key="iet" v-if="imt.checked==1">
                            <span class="specification">
                              <span v-for="(v, i) in imt.arr" :key="i">{{ v.specif }}</span>
                              {{ imt.num }}件
                            </span>
                         </div>
                      
                    </div>
                    <div v-else
                         class="df-specification">
                      请添加规格
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="df-c primary-btn"
         v-show="current == 2">
      <el-button type="primary"
                 class=""
                 @click="handleNewAdd">立即{{text}}</el-button>
    </div>
    <el-dialog title="添加商品可选规格"
               :visible.sync="dialogFormVisible">
      <div class="product-specification">
        <div v-for="(item, index) in parameter"
             :key="index">
          <div>
            <div class="product-color">可选{{ item.specifs }}：</div>
            <el-button class="specification"
                       @click="selectSpecifs(keys, index)"
                       v-for="(data, keys) in item.child"
                       :class="{'active':data.selected==true}"
                       :key="keys">{{ data.specif }}</el-button>
          </div>
        </div>

        <div>
          <div class="mt">数量：</div>
          <span class="minus"
                @click="handleMinus">-</span>
          <input type="text"
                 class="num active"
                 v-model="num" />
          <span class="add"
                @click="handleAdd">+</span>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleDialogSure">确 定</el-button>
      </div>
    </el-dialog>
     <el-dialog title="添加商品默认规格"
               :visible.sync="dialogFormVisible2">
      <div class="product-specification">
        <div v-for="(item, index) in defaultList"
             :key="index">
          <div class="default-specification" @click="handleSelectDefault(item,index)">
            <span  v-for="(data, keys) in item.arr"
              :key="keys">{{ data.specif }}
              </span><span>{{item.num}}件</span>
          </div> 
            <!-- <el-button class="specification"
                       @click="selectSpecifs(keys, index)"
                       :class="data.selected ? 'active' : ''"
                       v-for="(data, keys) in item.arr"
                       :key="keys">{{ data.specif }}</el-button> -->
          
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleDialogSure2">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="请搜索需要添加的商品"
               :visible.sync="dialogFormVisible3">     
       <div class="seach">
          <el-input v-model="search"
                    placeholder="请输入商品信息查询"></el-input>
          <button class="button"
                  @click="getProductMatch">
            <i class="el-icon-search"></i>搜索
          </button>
        </div>
        <div class="border-bt" v-if="goodsList.length">
          <div class="goods-list"
               v-for="(item, index) in goodsList"
               :key="index">
            <el-radio v-model="radio2"
                      :label="index"
                      @change="handleProduct(item.cate_id,item.cate_name,item.product_id,index)">
              <img :src="item.main_imgurl"
                   alt=""
                   class="logo-img" />
              <span class="content">{{ item.product_title }}</span>
            </el-radio>
          </div>
          <p @click="openMore">{{moreTxt}}</p>
        </div>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleProductSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
export default {
  components: { VueEditor },
  name: 'Vue2Editor',
  data() {
    return {
      imageUrl: '', //封面图片
      imageUrlId: '', //封面图片id
      activeIndex: '1',
      current: 0,
      editorLoading: false, //富文本图片loading
      customToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }], //标题
        ['bold', 'italic', 'underline'], //加粗\斜体\下划线
        ['italic'], //斜体----也可以拆开来写，用于换位置顺序
        [{ align: '' }, { align: 'center' }, { align: 'right' }], //对齐
        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }], //有序无序列表
        [{ background: [] }, { color: [] }], //背景色
        ['image', 'link'], //图片、链接
        ['strike'], //作废（文字中间一横）
        ['underline'],
        ['clean'], //清楚格式（所谓去掉背景色这些花里胡巧）
        ['code'], //代码
        ['code-block'], //代码块
        //['video'] //视频
      ],
      navTab:['产品包信息','应用场景详情','产品包商品'],
      content: '',
      form: {
        area_scope: '',
        price: '',
      },
      recommend: '', //是否推荐
      dialogImageUrl: '',
      dialogVisible: false,
      list: [],
      jsonList: '',
      search: '苹果', //商品匹配
      radio2: '',
      goodsList: [], //关联商品
      searchShow: false,
      productId: null,
      productIndex:null,
      id: null,
      fileList:[],
      shopList:[], //商品列表
      productList: {}, //产品包信息
      sceneList: {
        thumb_url:[]
      }, //应用场景
      diyList: {}, //产品包商品
      houseTypeList: '', //户型选中
      houseTypeTagList: [], //户型标签
      houseTypeId: null,
      dialogFormVisible: false, //规格弹框
      dialogFormVisible2: false, //默认规格弹框
      dialogFormVisible3:false,//搜索弹框
      num: 1, //规格数量
      speckeys:[],
      text:'添加',
      cate_id:'',
      cate_name:'',
      productShow: false, //添加商品
      productShowItem: null, //添加规格
      productContentShow: null,
      selectType:1, //弹出对话框 1添加商品，2添加可替换商品
      pitchProductList: [], //选中商品数据
      // pitchProductSecond: [],//次级商品数据,
      parameter: [], //可选
      optionType:1,//1一级可选，2二级可选。（当前选择状态选一级还是二级）
      parameter2: [], //默认
      selectData: [],
      shopListIndex:null,//列表的下标
      selectIndex: undefined,
      selectKeys: undefined,
      defaultList: [], //默认规格的数据
      checkDefault:[], //选中的默认规格(一级)
      checkIndex:0,//选中默认规格的下标
      thumb_url_id: '', //轮播图id
      img_id: [], //轮播图id数组
      imgId: '', //轮播图列表
      commodityId: null, //选中商品id
      selectDataList: {}, //选中的数据
      productData: {}, //规格总数据
      sku_id: '',
      sku_price: '',
      sku_primary_price: '',
      sku_num: '',
      defaultType:1,
      moreTxt:'点击加载更多',
      page:1,
      pagesize:10,
      house_room_list:[{
        name:'一室',
        value:1
      },{
        name:'两室',
        value:2
      },{
        name:'三室',
        value:3
      },{
        name:'四室',
        value:4
      },{
        name:'五室',
        value:5
      },{
        name:'六室',
        value:6
      },{
        name:'七室',
        value:7
      },{
        name:'八室',
        value:8
      },{
        name:'九室',
        value:9
      },],
      house_office_list:[{
        name:'一厅',
        value:1
      },{
        name:'两厅',
        value:2
      },{
        name:'三厅',
        value:3
      },{
        name:'四厅',
        value:4
      },{
        name:'五厅',
        value:5
      },{
        name:'六厅',
        value:6
      },{
        name:'七厅',
        value:7
      },{
        name:'八厅',
        value:8
      },{
        name:'九厅',
        value:9
      },],
      house_room:'',//室数
      house_office:'',//厅数
      deposit_rate:10,//定金比率
      set_deposit_status:'0',//是否定金支付
    }
  },
  mounted() {
    this.id = this.$route.query.id
    if(this.id){
      this.text = '修改'
    }
    this.getProductList()
    this.getHouseTypeList()
  },

  
  computed: {
    /**
     * 获取可选规格
     */
    selectParameter() {
      let arr = []
      this.parameter.forEach((data) => {
        data.child.forEach((item) => {
          let newObj = {}

          if (item.selected) {
            if (!newObj.specif && newObj.specif !== item.specif) {
              newObj = item
              arr.push(item)
            }
          }
        })
      })
      return { arr: arr }
    },
    //默认规格
    // selectParameter2() {
    //   let arr = []
    //   this.parameter2.forEach((data) => {
    //     data.child.forEach((item) => {
    //       let newObj = {}

    //       if (item.selected) {
    //         if (!newObj.specif && newObj.specif !== item.specif) {
    //           newObj = item
    //           arr.push(item)
    //         }
    //       }
    //     })
    //   })
    //   return { arr: arr }
    // },
  },
  methods: {

    // 获取产品包详情


    //是否推荐
    handleRecommend(e) {
      // console.log(e, '推荐-----')
      this.recommend = e
    },
    //封面图上传
    handleAvatarSuccess(res, file) {
      console.log(file, 666)
      this.imageUrl = URL.createObjectURL(file.raw)
      this.imageUrlId = file.response.data.id
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    //立即添加
    handleNewAdd() {
      console.log(this.shopList);
      let product_list = []
      this.shopList.map(item=>{
        console.log(item,'1111111');
        item.list.map(item1=>{
          console.log(item1);
          let obj = {
            product_data:{},
            replace_product_data:[]
          }
          let obj1={
            id:item1.id?item1.id:null,
            product_id:item1.product_id,
            sku_data:[]
          }
          obj.product_data = obj1
          item1.selectData.map(item2=>{
            console.log(item2,'22222222222');
            let obj2 = {
              id:item2.id?item2.id:null,
              sku_id:item2.id?'':item2.sku_id,
              num:item2.num,
              checked:item2.checked
            }
            obj1.sku_data.push(obj2)
          })
          
          if(item1.productSecondList){
            item1.productSecondList.map(item3=>{ //可替换商品
            console.log(item3,'333333333333333');
              let obj3={
                product_id:item3.product_id,
                sku_data:[]
              }
              item3.selectData.map(item4=>{
                console.log(item4,'4444444444444444');
                let obj4 = {
                  id:item4.id?item4.id:null,
                  sku_id:item4.id?'':item4.sku_id,
                  num:item4.num,
                  checked:item4.checked
                }
                obj3.sku_data.push(obj4)
              })
              obj.replace_product_data.push(obj3)
            })
          }
          console.log(obj);
          product_list.push(obj)
        })
      })

      console.log(product_list);

      let productJsonList = JSON.stringify(product_list)
      console.log(productJsonList, 'json数据')
      
      // let skuLst = []
      // let skuObj = {}
      // this.list.map(item=>{
      //   skuObj.id = item.id?item.id:'',

      // })
      let thumb_url_id = []
      console.log(this.fileList);
      this.fileList.map(item=>{
        thumb_url_id.push(item.img_id)
      })
      let params = {
        id:this.id,
        name: this.productList.name, //产品包名称
        area_price: this.productList.area_price, //每平方米价格
        title: this.productList.title, //产品包标签
        lead_img: this.imageUrlId, //展示图
        is_push: this.recommend, //是否推荐1是 0否
        sku_lst: JSON.stringify(this.list), //产品包sku
        // area_scope:this.form.area,//面积
        // price:this.form.price,//原价
        scene_title: this.sceneList.title, //应用场景名称
        offer: +this.sceneList.offer, //报价
        area: this.sceneList.area, //面积
        style_id: this.houseTypeList, //设计风格 传id
        // house_name: this.house_name_id, //户型名称
        house_room:this.house_room,
        house_office:this.house_office,
        content: this.sceneList.content, //应用场景介绍
        thumb_url: thumb_url_id.join(','), //应用场景轮播图多个1,2
        product_lst: productJsonList,
        set_deposit_status:this.set_deposit_status,
        deposit_rate:this.deposit_rate/100
      }
      console.log(this.id,'idididiidididid');
      let url = this.id?'/api/root/ProductPack/edit':'/api/root/ProductPack/add'
      console.log(url,'urlurlrurlurl');
      console.log(params, '添加参数')
      this.$http.post(url, params).then((res) => {
        // console.log(res,"tianjia-----66");
        if (res.code == 1) {
          this.$message({
            message: this.id?'修改成功':'添加成功',
            type: 'success',
          })
          if(!this.id){
            this.$router.back(1)
          }
        }else{
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    },
    /**
     * 删除二级列表里面的规格
     */
    // deleteGuige(index, keys, index1) {
    //   console.log(index1, index)
    //   this.pitchProductList[index].productSecondList[keys].selectData.splice(
    //     index1,
    //     1
    //   )
    // },


    // 定金比率
    setDeposit(){
      let fag = /^([1-9][0-9]{0,1}|100)$/;
      if(!fag.test(this.deposit_rate)){
        this.deposit_rate = 10
        this.$message.warning('请输入1-100之间')
        return
      }
    },
    /**
     * 删除二级列表里面第一个商品的规格
     */
    deleteGuige1(indexX,index,keys,type,keys1) {
      // list,
      console.log(keys, index)
      if(type==1){
        this.shopList[indexX].list[index].selectData.splice(keys, 1)
      }else{
        this.shopList[indexX].list[index].productSecondList[keys].selectData.splice(keys1, 1)
      }
      
    },
    //获取选中的标签
    handlehouseType(e) {
      console.log(e, '选中的标签-----')
      this.houseTypeList = e
    },
    //获取户型标签
    getHouseTypeList() {
      this.$http.post('/api/root/ProductPack/getStyle').then((res) => {
        // console.log(this.houseTypeId, 'fenggebiaoqian---')

        this.houseTypeTagList = res.data.design_style
        const result = this.houseTypeTagList.filter(
          (item) => item.id == this.houseTypeId
        )
        if (result.length) {
          this.houseTypeList = result[0].name
        }
        console.log(result, 989898)
      })
    },
    // 删除一级商品
    handleProductDel(index,indexX) {
      this.shopList[indexX].list.splice(index, 1)
      if(!this.shopList[indexX].list.length){
        this.shopList.splice(indexX,1)
      }
    },
    //添加商品
    handleAddProduct() {
      this.selectType = 1
      this.dialogFormVisible3 = true
    },
    /**
     * 选择可选规格
     */
    selectSpecifs(keys, index) {
      console.log(this.parameter);
      console.log(this.parameter,"guige88--");
      // console.log(paraArr,'2341341351521ksdfhgks');
      for (let i = 0; i < this.parameter[index].child.length; i++) {
        if (keys == i) {
          // this.parameter[index].child[i].selected = true
          this.$set(this.parameter[index].child[i],'selected',true)
        } else {
          // this.parameter[index].child[i].selected = false
          this.$set(this.parameter[index].child[i],'selected',false)
        }
      }
      console.log(this.parameter,"guige99--");
    },
    //选择默认规格
    // selectSpecifs2(keys, index) {
    //   for (let i = 0; i < this.parameter2[index].child.length; i++) {
    //     if (keys == i) {
    //       this.parameter2[index].child[i].selected = true
    //     } else {
    //       this.parameter2[index].child[i].selected = false
    //     }
    //   }
    // },
    handleSelectDefault(data,index){
      console.log(data,index);
      this.checkIndex = index
      if(this.defaultType==1){
        for(let i = 0;i<this.shopList[this.shopListIndex].list[this.selectIndex].selectData.length;i++){
          // console.log(this.pitchProductList[this.selectIndex].selectData[index].arr);
        //  this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].selectData[i],'checked',0)
            console.log(i);
            console.log(index);
          if(i==index){
            this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].selectData[i],'checked',1)
          }else{
             this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].selectData[i],'checked',0)
          }
        }
      }else{
        for(let i = 0;i<this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData.length;i++){
          // console.log(this.pitchProductList[this.selectIndex].selectData[index].arr);
          // this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData[i],'checked',0)
            console.log(i);
            console.log(index);
          if(i==index){
            this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData[index],'checked',1)
          }else{
            this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData[i],'checked',0)
          }
        }
      }
    },
    // 点击头部nav
  navFn(e){
    console.log(e.target.dataset.index);
    this.current = e.target.dataset.index;
    // this.getExamineList(this.navIndex)
  },

  // 商品匹配列表加载更多
    openMore(){
      this.page++
      let params = {
        keyword: this.search,
        page:this.page,
        pagesize:this.pagesize
      }
      this.$http.post('/api/root/ProductPack/product', params).then((res) => {
        console.log(res, 'shangp-------')
        if(res.code==1){
          if(!res.data.data.length){
            this.moreTxt = '没有更多了~'
            return
          }
          this.goodsList = this.goodsList.concat(res.data.data)
        }
      })
    },
    //商品匹配
    getProductMatch() {
      this.moreTxt = '点击加载更多'
      this.page=1
      let params = {
        keyword: this.search,
        page:this.page,
        pagesize:this.pagesize
      }
      this.$http.post('/api/root/ProductPack/product', params).then((res) => {
        console.log(res, 'shangp-------')
        if(res.code==1){
          this.goodsList = res.data.data?res.data.data:[]
        }
      })
    },

    //选择商品id
    handleProduct(cate_id,cate_name,e,index) {
      this.productId = e
      this.productIndex = index
      this.cate_id = cate_id
      this.cate_name = cate_name
      console.log(cate_id,'分类id');
      console.log(e,'商品id');
      console.log(index,'商品下标');
      console.log(this.radio2);
      console.log(this.goodsList);
    },
    handleProductSure() {
      if(this.selectType==1){///////////////////////////////////////////////添加商品
        // let productArr = []
        console.log(this.pitchProductList,'商品列表');
        console.log(this.pitchProductList.length,'列表length');
        console.log(this.productId,'商品id');
        console.log(this.radio2);
        console.log(this.cate_name,'分类名称');
        console.log(this.cate_id,'分类id');
        if(this.radio2===''){
          this.$message.warning('请选择商品')
          return
        }
        let cateArr = this.shopList.findIndex(item=>item.cate_id==this.cate_id)
        if(cateArr==-1){
           this.shopList.push({
              cate_id:this.cate_id,
              isShow: true,
              cate_name:this.cate_name,
              list:[]
          })
        }

        let cateArr2 = this.shopList.findIndex(item=>item.cate_id==this.cate_id)
        let isOk = this.shopList[cateArr2].list.findIndex(item=>item.product_id==this.productId)
        console.log(isOk);
        if(isOk!=-1){
          this.$message.warning('请勿重复添加')
          return
        }
        
        let obj = {
          ...this.goodsList[this.productIndex],
          productSecondList: [],
          selectData: [],
        }
        this.commodityId = obj.product_id
        // this.pitchProductList.push(obj)
        this.shopList[cateArr2].list.push(obj)
        console.log(this.shopList, '商品数组---------')
        this.dialogFormVisible3 = false
      }else{/////////////////////////////////////////////////////////////添加可替换商品
        if(this.radio2===''){
          this.$message.warning('请选择商品')
          return
        }
        let isOk = this.shopList[this.shopListIndex].list[this.productShowItem].product_id==this.productId
        console.log(isOk);
        if(isOk){
          this.$message.warning('请勿与原商品重复')
          return
        }

        let isOk2 = this.shopList[this.shopListIndex].list[this.productShowItem].productSecondList.findIndex(item=>item.product_id==this.productId)
        console.log(isOk2);
        if(isOk2!=-1){
          this.$message.warning('请勿重复添加替换商品')
          return
        }
        
        let obj = {
          ...this.goodsList[this.productIndex],
          selectData: [],
        }
        this.commodityId = obj.product_id
        this.shopList[this.shopListIndex].list[this.productShowItem].productSecondList.push(obj)
        console.log(this.shopList, '商品数组---------')
        this.dialogFormVisible3 = false
      }
      // this.shopList = JSON.parse(JSON.stringify(this.shopList))
    },
    //添加二级菜单
    handleProductAdd(index, indexX,item) {
      this.radio2 = ''
      this.selectType = 2
      this.dialogFormVisible3 = true
      this.productShowItem = index
      this.shopListIndex = indexX
      // let obj = Object.assign({}, item)
      // obj.selectData = []
      // this.pitchProductList[index].productSecondList.push(obj)
      // console.log(this.pitchProductList);
    },
    //删除二级菜单
    handleDelItem(indexX,index, keys) {
      console.log(keys, index)
      this.shopList[indexX].list[index].productSecondList.splice(keys,1)
    },
    handleContentShow(index) {
      this.shopList[index].isShow = !this.shopList[index].isShow
      // this.pitchProductSecond = []
    },
    //可选规格确定
    handleDialogSure() {
      this.dialogFormVisible = false
      let { selectIndex,shopListIndex,selectKeys } = this
      console.log(selectIndex,shopListIndex ,selectKeys,8899)
      // return;
      console.log(this.productData.parameter);
      this.get_keys()
      console.log(this.shopList[shopListIndex].list[selectIndex],"shuju--88");
      // console.log();
      if(this.optionType==1){
        let nowSpec = this.shopList[shopListIndex].list[selectIndex].selectData
        console.log(nowSpec,'nowSpec');
        let selectSpec = []
        nowSpec.map(item=>{
          let selectSpec1 = []
          item.arr.map(item1=>{
            selectSpec1.push({
              key:item1.key,
              value:item1.specif
            })
          })
          selectSpec.push(selectSpec1)
        })
        console.log(selectSpec,'主商品中的可选规格');
        // let nowSku = nowSpec.findIndex(item=>item.sku_id==this.sku_id)
        let nowSku = selectSpec.findIndex(item=>JSON.stringify(item)==JSON.stringify(this.speckeys))
        if(nowSku!=-1){
          this.$message.warning('规格重复')
          return
        }
      }else{
         let nowSpec2 = this.shopList[shopListIndex].list[selectIndex].productSecondList[selectKeys].selectData
        console.log(nowSpec2,'nowSpec2');
        let selectSpec2 = []
        nowSpec2.map(item=>{
          let selectSpec3 = []
          item.arr.map(item1=>{
            selectSpec3.push({
              key:item1.key,
              value:item1.specif
            })
          })
          selectSpec2.push(selectSpec3)
        })
        console.log(selectSpec2,'替换中的可选规格');
        let nowSku2 = selectSpec2.findIndex(item=>JSON.stringify(item)==JSON.stringify(this.speckeys))
        if(nowSku2!=-1){
          this.$message.warning('规格重复')
          return
        }
      }
      

      console.log(this.selectParameter,'next');
      console.log(this.sku_id);
      this.selectParameter.sku_id=this.sku_id
      this.selectParameter.num=this.num
      this.selectParameter.checked=0
      console.log(this.parameter.length,'next');

      if(this.selectParameter.arr.length<this.parameter.length){
        this.$message.warning('请选择规格')
        return
      }
      // if()
      // Object.values(this.selectParameter).forEach((data, index) => {
      //   data.num = this.num
      //   data.sku_id = this.sku_id //规格id
      //   data.checked=1
      // })
      if (selectIndex !== undefined && selectKeys === undefined) {
        this.shopList[shopListIndex].list[selectIndex].selectData =  this.shopList[shopListIndex].list[selectIndex].selectData.concat(this.selectParameter)
      }
      if (selectIndex !== undefined && selectKeys !== undefined) {
        this.shopList[shopListIndex].list[selectIndex].productSecondList[
          selectKeys
        ].selectData = this.shopList[shopListIndex].list[selectIndex].productSecondList[
          selectKeys
        ].selectData.concat(this.selectParameter)
      }
      // this.defaultList = this.pitchProductList[selectIndex].selectData
      // console.log(this.pitchProductList[selectIndex].selectData);
      // console.log(this.defaultList,"默认规格数据");
      console.log(this.shopList,"规格----");
    },
    get_keys() {
      // console.log();
      let keys = []
      console.log(this.productData.parameter);
      // let newParameter = JSON.parse(JSON.stringify(this.productData.parameter))
      // console.log(this.productData.parameter);
      this.parameter.map((item1, index1) => {
        console.log(item1,"meiyixiang");
        let checkedItem = item1.child.find((r) => r.selected)
        // console.log(checkedItem,"checkedItem");
        if (checkedItem) {
          keys.push({
            key: item1.specifs,
            value: checkedItem.specif,
          })
        }
      })
      console.log(keys, 44444)
      this.speckeys = keys
      let sku_lst = this.productData.sku_lst
      for (let i = 0; i < sku_lst.length; i++) {
        if (JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)) {
          console.log(sku_lst[i]);
          this.sku_id = sku_lst[i].sku_id
          this.price = sku_lst[i].price
          this.sku_primary_price = sku_lst[i].primary_price
          this.sku_num = sku_lst[i].num
          return
        }else{
          this.sku_id = sku_lst[0].sku_id
          this.price = sku_lst[0].price
          this.sku_primary_price = sku_lst[0].primary_price
          this.sku_num = sku_lst[0].num
        }
      }
    },
    //默认规格确定
    handleDialogSure2(){
        this.num = 1
        this.dialogFormVisible2 = false
    },
    //可选规格
    handleSelectable(item, index,indexX,type, keys) {
      this.optionType=type
      this.sku_id = ''
      this.shopListIndex = indexX
      this.selectIndex = index
      this.selectKeys = keys
      let { product_id } = item
      let params = {
        product_id,
      }
      this.$http
        .post('/api/root/ProductPack/productDetail', params)
        .then((res) => {
          console.log(res, '规格')
          this.productData = res.data
          let list = res.data.parameter
          console.log(list,'listlistlist');
          list.forEach((data) => {
            data.child.forEach((item) => {
              console.log(item);
              item.selected = false
              item.key = data.specifs
            })
          })
          this.parameter = JSON.parse(JSON.stringify(list))
          console.log(this.parameter);
          this.dialogFormVisible = true
        })
      // console.log("item", item, "index", index, "keys", keys)
    },
    //一级默认规格
    handleDefault(item,index,indexX,type,keys) {
      console.log(item,'more数据');
      console.log(index);
      this.defaultType = type
      console.log(type);
      this.selectIndex = index
      this.shopListIndex = indexX
      this.selectKeys = keys
      this.num = 1
      this.defaultList = item.selectData
      // let { product_id } = item
      // let params = {
      //   product_id,
      // }
      // this.$http
      //   .post('/api/root/ProductPack/productDetail', params)
      //   .then((res) => {
      //     console.log(res, '规格')
      //     this.productData = res.data
      //     let list = this.defaultList
      //     list.forEach((data) => {
      //       // let {data,selected} = data
      //       data.arr.forEach((item) => {
      //         item.selected = false
      //       })
      //     })
      //     this.defaultList = list
      //     console.log(this.defaultList,"moren666");
          this.dialogFormVisible2 = true
      //   })
    },
    //规格数量操作
    handleMinus() {
      if (this.num == 1) {
        return
      } else {
        this.num = this.num - 1
      }
    },
    handleAdd() {
      this.num += 1
    },
    /**
     * 添加
     */
    addData() {
      let { area_scope, price } = this.form
      let newArea = area_scope.split('-')
      // console.log(area_scope,7878);
      console.log(newArea[0], newArea[1])
      if (newArea[0] > newArea[1])
        return this.$message({
          message: '面积格式有误',
          type: 'warning',
        })
      let data = {
        area_scope: area_scope,
        price,
      }
      if (!area_scope) return
      if (!price) return
      this.list.push(data)
      console.log(this.list);
      // this.jsonList = JSON.stringify(this.list)
      // this.jsonList = JSON.stringify(this.list)
      // console.log(this.jsonList, 66668)
      this.form.area_scope = ''
      this.form.price = ''
    },
    handleDel(index) {
      this.list.splice(index, 1)
    },
    handleDraw() {
      this.dialogImageUrl = this.sceneList.thumb_url[0].image_path
      this.dialogVisible = true
    },
    handlePictureCardPreview(file) {
      //  console.log(file,6666);
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleImageSuccess(res, file) {
      console.log('图片上传1', file.response)
      let logoData = file.response.data
      this.dialogImageUrl = logoData.url
      // let img_id = []
      // this.img_id.push(logoData.id)
      // console.log(this.img_id, 'id----------')
      // this.sceneList.thumb_url.push({
      //   image_path:logoData.url,
      //   img_id:logoData.id
      // })
      this.fileList.push({
        url:logoData.url,
        img_id:logoData.id
      })
      // this.imgId = this.img_id.join(',')

      // console.log(this.imgId);
      // this.logo_id = logoData.id
    },
    beforeImageUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handleRemove(file, fileList) {
      let imgIndex = this.fileList.findIndex(item=>item.img_id==file.img_id)
      this.fileList.splice(imgIndex,1)
      console.log(file, fileList)
    },
    //tap栏切换
    handleSelect(key, keyPath) {
      this.current = key
      // console.log(this.current,7777);
      // if (this.current == 2) {
      //   this.getHouseTypeList()
      // }
    },
    //获取案例详情
    getProductList() {
      let params = {
        id: this.id,
      }
      this.$http.post('/api/root/ProductPack/detail', params).then((res) => {
        console.log(res, "详情数据");
        if (res.code == 1) {
          this.set_deposit_status = res.data.product_pack.set_deposit_status==1?'1':'0'
          this.deposit_rate = (res.data.product_pack.deposit_rate*100).toFixed(0)
          this.productList = res.data.product_pack
          this.imageUrl = res.data.product_pack.lead_img
          this.imageUrlId = res.data.product_pack.lead_img_id
          this.list = res.data.product_pack.sku_lst
          this.sceneList = res.data.product_pack_scene
          console.log(res.data.product_pack_scene);
          // this.house_typeList.map(item=>{
          //   if(item.name==res.data.product_pack_scene.house_name){
              // this.house_name_id = res.data.product_pack_scene.house_name
          //   }
          // })
          this.house_room = res.data.product_pack_scene.house_room
          this.house_office = res.data.product_pack_scene.house_office
          console.log(this.house_name_id);
          this.diyList = res.data.product_pack_diy_list
          this.houseTypeList = res.data.product_pack_scene.style_id
          if (this.productList.is_push == 1) {
            this.recommend = '1'
          } else {
            this.recommend = '0'
          }
          res.data.product_pack_scene.thumb_url.map(item=>{
            this.fileList.push({
              url:item.image_path,
              img_id:item.img_id
            })
          })
          console.log(this.pitchProductList);
          this.shopList = []
          // this.pitchProductList = res.data.product_pack_diy_list
          
          res.data.product_pack_diy_list.map(item=>{
            let obj={
              cate_id:item.cate_id,
              cate_name:item.cate_name,
              isShow:true,
              list:[]
            }
            item.product_list.map(item1=>{ //主商品
              let obj1 = {
                id:item1.product_data.id,
                product_id:item1.product_data.product_id,
                product_title:item1.product_data.product_title,
                store_name:item1.product_data.store_name,
                cate_id:item1.product_data.cate_id,
                cate_name:item1.product_data.cate_name,
                selectData:[],
                productSecondList:[]
              }
              item1.product_data.sku_data.map(item2=>{ //规格
                let obj2 = {
                  id:item2.id,
                  num:item2.num,
                  checked:item2.checked,
                  sku_id:item2.id,
                  arr:[]
                }
                if(item2.attribute){
                  item2.attribute.map(item3=>{
                    let obj3 = {
                      specif:item3.value,
                      key:item3.key
                    }
                    obj2.arr.push(obj3)
                  })
                }
                obj1.selectData.push(obj2)
              })

              item1.replace_product.map(item4=>{ //替换商品
                let obj4 = {
                    product_id:item4.product_id,
                    product_title:item4.product_title,
                    store_name:item4.store_name,
                    cate_name:item4.cate_name,
                    selectData:[]
                }
                item4.sku_data.map(item5=>{ //规格
                  let obj5 = {
                    id:item5.id,
                    num:item5.num,
                    checked:item5.checked,
                    sku_id:item5.id,
                    arr:[]
                  }
                  if(item5.attribute){
                    item5.attribute.map(item6=>{
                      let obj6 = {
                        specif:item6.value,
                        key:item6.key
                      }
                      obj5.arr.push(obj6)
                    })
                  }
                  obj4.selectData.push(obj5)
                })
                obj1.productSecondList.push(obj4)
              })
              obj.list.push(obj1)
            })
            this.shopList.push(obj)
          })

          console.log(this.shopList);
        }
      })
    },
    handerBase() {
      this.$router.go(-1)
    },
    //富文本上传图片
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData()
      let isLtSize = file.size / 1024 / 1024 < 10
      if (!isLtSize) {
        this.$message.warning('上传文件不能超过 10MB!')
        return
      }
      this.editorLoading = true
      formData.append('file', file)
      this.$http.post('/api/admin/base/uploadfile',formData)
        .then((result) => {
          // 你上传路径返回的url
          let url = result.data.url
          Editor.insertEmbed(cursorLocation, 'image', url)
          resetUploader()
          this.editorLoading = false
        })
        .catch((err) => {
          console.log(err)
          this.editorLoading = false
        })
    },
  },
}
</script>

<style scoped lang="less">
.el-input {
  width: 300px;
}
.container {
  // padding-bottom: 50px;
  //头部
  .closed_details_top {
    width: 100%;
    height: 40px;
    padding: 0px 20px;
    display: flex;
    align-items: center;

    .into_index {
      width: 100px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      color: #101010;
      font-size: 14px;
      border: 1px solid #bbbbbb;
      position: relative;
      border-radius: 4px;
      cursor: pointer;

      i {
        top: 7px;
      }
    }

    i {
      position: absolute;
      right: 4px;
      top: 8px;
    }
    .current {
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: #409eff 10000%;
      border: 1px solid #fff;
      position: relative;
      font-size: 14px;
      color: #fff;
      margin-left: 10px;
      border-radius: 4px;
      cursor: pointer;

      &::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 6px;
        top: 10px;
      }
    }
  }
  .closed_details_title {
    width: 100%;
    height: 90px;
    background: #f5f5f5;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_left {
      color: #101010;
      font-size: 14px;

      i {
        color: #5692fa;
        font-style: normal;
      }
    }

    &_right {
      &_btn {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        outline: none;
        border: 0 none;
        background: #27b148;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .title-receiving {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    .detail {
      color: #409eff;
    }
  }
  // 头部导航
    .navTab{
        width: 100%;
        // height: 160px;
        // padding: 20px 20px;
        background-color: #f5f5f5;
        .navTabList{
            position: relative;
            width: 100%;
            height: 120px;
            background-color: #fff;
            display: flex;
            padding: 20px 0;
            text-align: center;
            // line-height: 80px;
            .navTabItem{
                font-size: 16px;
                display: flex;
                flex-direction: column;
                padding: 0 15px;
                margin: 0 20px;
                line-height: 50px;
                align-items: center;
                cursor: pointer;
                .navBorder{
                    width: 25px;
                    height: 5px;
                    background-color: #409EFF;
                }
            }
            .navTabItem_active{
                color: #409EFF;
            }
        }
        .navTabList::before{
            content: '';
            width: 100%;
            position: absolute;
            left: 0px;
            bottom: 35px;
            border-bottom: 2px solid rgba(0, 0, 0,0.3);
        }
    }
    
  .product-detail {
    padding: 20px;
    .form-tel {
      display: flex;
      .tel-input {
        // margin-right: 100px;
        display: flex;
        align-items: center;
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
        .tag {
          width: 750px;
        }
        .price {
          margin-left: 20px;
        }
        .el-icon-error {
          font-size: 20px;
          margin-left: 5px;
        }
        .money {
          margin-left: 10px;
        }
        .cover {
          width: 250px;
          height: 150px;
        }
        .add-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid #c0c4cc;
          padding: 0 5px;
          margin-right: 10px;
          margin-bottom: 10px;
          width: 200px;
          i {
            cursor: pointer;
          }
        }
      }
      .add-items {
        display: flex;
        align-items: center;
        width: 800px;
        flex-wrap: wrap;
      }
      .add-btn {
        width: 80px;
        height: 40px;
        padding: 5px 0;
        margin-left: 26px;
      }
      .service {
        display: flex;
        align-items: center;
        margin-left: 100px;
        .money {
          margin-left: 10px;
        }
      }
    }
  }
  .application-scenarios {
    padding: 20px;
    padding-bottom: 100px;
    .form-tel {
      display: flex;
    }
    .service {
      // display: flex;
      // align-items: center;
      margin-left: 100px;
      .money {
        margin-left: 10px;
      }
    }
    //图片上传样式
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .picture-card {
      display: flex;
    }
    .avatar {
      width: 148px;
      height: 148px;
      display: block;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }
  .editor .ql-editor {
    min-height: 300px;
    max-height: 300px;
    font-size: 14px;
  }
  .seach {
      width: 50%;
      margin: 20px 0;
      display: flex;
      .button {
        width: 100px !important;
        background: #409dfb;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        border: 0 none;
        outline: none;
        border-radius: 4px;
        color: #fff;

        i {
          margin-right: 5px;
        }
      }
    }
    .border-bt {
      padding-bottom: 30px;
      border-bottom: 1px solid #ccc;
      // width: 70%;
      max-height: 600px;
      overflow-y: auto;
      p{
                color: #409EFF;
                width: 70%;
                padding-top: 20px;
                text-align: center;
                cursor: pointer;
            }
    }
    .goods-list {
      width: 600px;
      border: 1px solid #e0e0e0;
      padding: 5px;

      .logo-img {
        width: 40px;
        height: 40px;
      }
      .content {
        width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 10px;
      }
    }
  .product-goods {
    padding: 20px;
    
    
    .product-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 65%;
      margin-top: 15px;
    }

    .down-menu {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      background: #f8f9f8;
      width: 60%;
      i {
        cursor: pointer;
      }
      h6 {
        cursor: pointer;
        margin-bottom: 10px;
      }
      .menu-type {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        // width: 41%;
        margin-bottom: 10px;
        .df-specification {
          margin-left: 5px;
        }
        .specification {
          padding: 2px 4px;
          background: #f4f5f4;
          margin-left: 10px;
          .el-icon-error {
            margin-left: 5px;
          }
        }
      }
      // .default {
      //   width: 23%;
      // }
      .menu-bg {
        background: #fff;
        padding: 20px;
        .menu-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          .el-button {
            padding: 3px 8px;
            margin-right: 5px;
            // height: 20px;
          }
        }
        p {
          margin-bottom: 10px;
        }
        .menu-line {
          border-bottom: 1px solid #e1e1e1;
        }
      }
    }
  }
  
  .product-specification {
    .specification {
      // padding: 5px 20px;
      background: #f7f8f7;
      margin-right: 20px;
      // border: none;
    }
    .active {
      border: 1px solid #66b1ff;
      color: #66b1ff;
    }
    .default-specification{
      cursor: pointer;
      padding: 5px 8px;
      background: #f7f8f7;
      margin-bottom: 10px;
      width: 130px;
    }
    .product-color {
      margin-bottom: 20px;
    }
    .mt {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .minus {
      padding: 5px 10px;
      background: #f7f8f7;
      cursor: pointer;
    }
    .add {
      padding: 5px 10px;
      background: #f7f8f7;
      cursor: pointer;
    }
    .num {
      // padding: 2px 10px;
      background: #f7f8f7;
      margin: 0 5px;
      width: 40px;
      height: 30px;
      text-align: center;
    }
    input:focus {
      border: none;
      outline: none;
    }
  }

  .primary-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
  //分页
  .payment_index_bottom_page {
    width: 1210px;
    height: 40px;
    margin: 10px auto 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_left {
      height: 40px;
      display: flex;
      align-items: center;
      color: #000;
      font-size: 14px;
    }

    &_right {
      .el-pagination {
        font-weight: 400;
      }
    }
  }
  .shelves{
    width:100%;
    display:flex;
  }
  
  // .seckill_date_range{
	// 	margin-top: 30px;
	// 	display: flex;

	// 	> :first-child{
	// 		width: 80px;
	// 		height: 40px;
	// 		text-align: right;
	// 		margin-right: 30px;
	// 	}

	// 	> :last-child{
	// 		height: 40px;
	// 		line-height: 40px;
	// 	}
	// 	input{
	// 		padding-left: 36px !important;
	// 	}
	// }
}
</style>